<template>
    <el-card>
      <div>
        <!-- 页面标题 -->
        <h2>试卷分析</h2>
  
        <!-- 筛选部分 -->
        <div class="filter-section">
          <el-form :inline="true" class="filter-form">
            <el-form-item label="选择试卷：">
              <el-select v-model="selectedPaper" placeholder="请选择试卷" style="width: 200px">
                <el-option
                  v-for="item in papers"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
  
        <!-- 表格部分 -->
        <el-table :data="tableData" style="width: 100%;height:100vh;" border>
          <el-table-column prop="id" label="序号" width="80" />
          <el-table-column prop="name" label="试卷名称" />
          <el-table-column prop="status" label="试卷状态">
            <template #default="{ row }">
              <span :style="{ color: row.status === '占用' ? 'red' : 'green' }">{{ row.status }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="卷面总分" />
          <el-table-column prop="address" label="考场信息" />
          <el-table-column prop="creator" label="创建人" />
          <el-table-column prop="date" label="创建日期" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-link @click="handleAnalysis(row)">试卷分析</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 试卷分析 -->
        <!-- 分页部分 -->
         <div class="fenye">
          <div><p>共66条试卷信息</p></div>
          <el-pagination background layout="prev, pager, next" :total="100" />
         </div>
       
      </div>
    </el-card>
  </template>
  
  <script>
  import { ref, reactive } from "vue";
  import { Search } from "@element-plus/icons-vue";
  import { useRouter } from "vue-router";


  export default {
    setup() {
      const useTable = () => {
        const tableData = ref([
          {
            id: "01",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "A班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "02",
            name: "2017年第一次月考",
            status: "空闲",
            score: 100,
            address: "B班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "03",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "C班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "04",
            name: "2017年第一次月考",
            status: "空闲",
            score: 100,
            address: "D班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "05",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "06",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "A班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "07",
            name: "2017年第一次月考",
            status: "空闲",
            score: 100,
            address: "B班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "08",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "C班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "09",
            name: "2017年第一次月考",
            status: "空闲",
            score: 100,
            address: "D班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
          {
            id: "10",
            name: "2017年第一次月考",
            status: "占用",
            score: 100,
            address: "E班",
            creator: "张三",
            date: "2017.06.02 11:55",
          },
        ]);
  
        const currentPage = ref(1);
        const pageSize = ref(5);
        const total = ref(50);
  
        return {
          tableData,
          currentPage,
          pageSize,
          total,
        };
      };
  
      const useFilter = () => {
        const selectedPaper = ref("");
        const papers = ref([
          { label: "2017年第一次月考", value: "2017年第一次月考" },
          { label: "2017年第二次月考", value: "2017年第二次月考" },
        ]);
  
        const search = () => {
          console.log("搜索试卷:", selectedPaper.value);
        };
  
        return {
          selectedPaper,
          papers,
          search,
        };
      };
  
      const useAnalysis = () => {
        const router = useRouter();
        const handleAnalysis = (row) => {
           router.push('/exam/examAnalysis/ExamAnalysis');
        };
  
        return {
          handleAnalysis,
        };
      };
  
      // 使用组合式函数返回的内容
      const table = useTable();
      const filter = useFilter();
      const analysis = useAnalysis();
  
      return {
        ...table,
        ...filter,
        ...analysis,
      };
    },
  };
  
  </script>
  
  <style scoped>
  .filter-section {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .fenye{
    margin-top: 20px;
    margin-right: 10px;
    display: flex;
    justify-content: space-between;
  }
  </style>
  